<HTML>
<HEAD>
<TITLE>Drop-down menus</TITLE>
</HEAD>
<!--
----------------
Drop-down Menus
----------------
-->
<SCRIPT LANGUAGE="JavaScript"><!-- hide from old browsers
/*
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
and J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
*/
function menuSelect(theform)
{
var page = theform.pageSelect.options[theform.pageSelect.selectedIndex].value;
alert('The page would be changed to '+page);
//
// but you would put in
//
//parent.location.href=page;
}
function menu2Select(theform)
{
var page = theform.page2Select.options[theform.page2Select.selectedIndex].value;
alert('The page would be changed to '+page);
}
//-->
</SCRIPT>
<BODY bgcolor="ffffff" link="0000ff" vlink="770077">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Creating "Drop Down" Menus</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we look at how a very short piece of JavaScript code
can clean up HTML menus and selection drop-downs.
</FONT>
<form>
<select name="pageSelect">
<option selected value="/index.html">Home
<option value="/orginfo.htm">Org Info
<option value="/events.htm">Events
<option value="/contracts.htm">Contracts
<option value="/feedback.htm">Feedback
<option value="/comments.html">Comments to Mr. Frye
<option value="/helpdesk.htm">Helpdesk
<option value="/programs/">Programs
<option value="/stats.htm">Statistics
<option value="/Phonefind/locator.htm">Locator
<option value="/search">Search
</select>
<input type="button" name="goButton" value="Go!" onClick="menuSelect(this.form)">
</form>
<BR>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
This two-line script crams a lot of work into a tiny space. The author, Air Force Staff Sgt. Mark Cartwright, has the following to say about it:<P>
'<i>What it is is a pull-down menu for navigation purposes.
Instead of checking the value of each field and setting the result, it
can read the value no matter how many fields you have.<p>
This is a piece of code that I have seen done elsewhere, but I
have re-done it to make it more manageable from the maintenance point
of view, and to improve loading time [with] a lesser amount of
code.</i>'<p>
For demonstration purposes we've replaced the page-changing aspect with an alert message,
but here's what the function looks like as you'd actually use it:
<p>
<FONT color="770000"><pre>
function menuSelect(theform)
{
var page = theform.pageSelect.options[theform.pageSelect.selectedIndex].value;
parent.location.href=page;
}
</pre>
</FONT>
<p>
The truly interesting part is that, because the form is passed to the function (and provided
you always name the selection object 'pageSelect'), this code can service several pages
in a suite by caching it in an invisible frame.<P>
The following drop-down adds another wrinkle--you can use the <FONT COLOR="770000">onChange()</FONT>
event to trigger a call to the JavaScript function, so you don't even need the
"Go!" button in the previous menu.</FONT><p>
<form>
<select name="page2Select" onChange="menu2Select(this.form)">
<option selected value="/index.html">The Base Page
<option value="/page1.htm">The First Page
<option value="/page2.htm">The Second Page
<option value="/page3.htm">The Page After the Second Page
<option value="/page4.htm">The Page Page
</select>
</form>
<BR><BR>
<h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>